<!-- 用户授权 -->
<template>
    <div class="myuser">
        <div class="usertitle">用户资料信息列表</div>
        <div class="user_1">
            <p style="font-size: 17px;">用户授权基本信息</p>
        </div>
        <div class="user_2">
            <el-form
                :label-position="labelPosition"
                label-width="100px"
                :model="ruleForm"
                style="max-width: 460px"
            >
                <el-form-item label="用户名">
                <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item label="员工姓名">
                <el-input v-model="ruleForm.staffname" placeholder="请输入员工姓名" />
                </el-form-item>
                <el-form-item label="管理员分类" prop="region">
                    <el-select v-model="ruleForm.admin" placeholder="超级管理员">
                        <el-option label="超级管理员" value="chaoji" />
                        <el-option label="系统管理员" value="xitong" />
                        <el-option label="业务管理员" value="yewu" />
                        <el-option label="售后管理员" value="shouhou" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门名称" prop="region">
                    <el-select v-model="ruleForm.depname" placeholder="研发部">
                        <el-option label="研发部" value="yanfabu" />
                        <el-option label="业务部" value="yewubu" />
                        <el-option label="人事部" value="renshibu" />
                        <el-option label="制作部" value="zhizuobu" />
                        <el-option label="总经办" value="zongjingban" />
                        <el-option label="阅港" value="yuegang" />
                    </el-select>
                </el-form-item>
                <el-form-item label="职位名称" prop="region">
                    <el-select v-model="ruleForm.postname" placeholder="总经理">
                        <el-option label=" 总经理" value="aa" />
                        <el-option label=" 副经理" value="ss" />
                        <el-option label="大区经理 " value="dd" />
                        <el-option label="省经理 " value="ff" />
                        <el-option label=" 销售经理" value="gg" />
                        <el-option label="销售助理 " value="hh" />
                        <el-option label=" 销售代表" value="jj" />
                        <el-option label=" 人事经理" value="kk" />
                        <el-option label=" 人事主管" value="ll" />
                        <el-option label=" 人事助理" value="zz" />
                        <el-option label="资源经理 " value="xx" />
                        <el-option label="资源助理" value="cc" />
                        <el-option label="资源主管" value="vv" />
                        <el-option label="资源代表" value="bb" />
                        <el-option label="技术总监" value="nn" />
                        <el-option label="技术经理 " value="mm" />
                        <el-option label=" 技术主管" value="qq" />
                        <el-option label="技术助理 " value="ww" />
                        <el-option label="产品经理" value="ee" />
                        <el-option label="产品助理" value="rr" />
                        <el-option label="产品主管" value="tt" />
                        <el-option label="测试员" value="yy" />
                        <el-option label="网络管理员" value="uu" />
                        <el-option label="网页前端" value="ii" />
                        <el-option label="制作经理" value="oo" />
                        <el-option label="制作主管" value="pp" />
                        <el-option label="制作助理" value="as" />
                        <el-option label="制作人员" value="ad" />
                        <el-option label="平面设计师" value="af" />
                        <el-option label="制作售后处理人员" value="ag" />
                        <el-option label="培训推广" value="ah" />
                        <el-option label="其他" value="aj" />
                    </el-select>
                </el-form-item>
                <el-form-item label="职务类别" prop="region">
                    <el-select v-model="ruleForm.postname2" placeholder="总经理">
                        <el-option label=" 总经理" value="aa" />
                        <el-option label=" 副经理" value="ss" />
                        <el-option label="大区经理 " value="dd" />
                        <el-option label="省经理 " value="ff" />
                        <el-option label=" 销售经理" value="gg" />
                        <el-option label="销售助理 " value="hh" />
                        <el-option label=" 销售代表" value="jj" />
                        <el-option label=" 人事经理" value="kk" />
                        <el-option label=" 人事主管" value="ll" />
                        <el-option label=" 人事助理" value="zz" />
                        <el-option label="资源经理 " value="xx" />
                        <el-option label="资源助理" value="cc" />
                        <el-option label="资源主管" value="vv" />
                        <el-option label="资源代表" value="bb" />
                        <el-option label="技术总监" value="nn" />
                        <el-option label="技术经理 " value="mm" />
                        <el-option label=" 技术主管" value="qq" />
                        <el-option label="技术助理 " value="ww" />
                        <el-option label="产品经理" value="ee" />
                        <el-option label="产品助理" value="rr" />
                        <el-option label="产品主管" value="tt" />
                        <el-option label="测试员" value="yy" />
                        <el-option label="网络管理员" value="uu" />
                        <el-option label="网页前端" value="ii" />
                        <el-option label="制作经理" value="oo" />
                        <el-option label="制作主管" value="pp" />
                        <el-option label="制作助理" value="as" />
                        <el-option label="制作人员" value="ad" />
                        <el-option label="平面设计师" value="af" />
                        <el-option label="制作售后处理人员" value="ag" />
                        <el-option label="培训推广" value="ah" />
                        <el-option label="其他" value="aj" />
                    </el-select>
                </el-form-item>
                <el-form-item label="授权状态" prop="region">
                    <el-select v-model="ruleForm.impower" placeholder="启用">
                        <el-option label="启用" value="shanghai" />
                        <el-option label="禁用" value="beijing" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="user_3">
            <p style="font-size: 17px;">用户权限设置</p>
        </div>
        <div class="user_4">
            <div class="user_5">
                <p class="user_7">1.栏目权限：<span style="color:#BCBCBC; margin-left:20px;">注：只要勾选的栏目频道，即表示授权给用户登录后看到栏目频道</span></p>
                <div class="user_8">
                    <div>
                        <el-checkbox v-model="checked2" style="color:red; ">全部选</el-checkbox>
                    </div>
                    <div>
                        <el-checkbox v-model="item.type" v-for="item in lmqx" :key="item.id" style="margin-left:10px;">{{item.name}}</el-checkbox>
                    </div>
                </div>
            </div>
            <div class="user_6">
                <p class="user_9">2、操作功能权限：<span style="color:#BCBCBC; margin-left:20px;">注：只要勾选的功能，即用户操作功能授权</span></p>
                <div class="user_10">
                    <div>
                        <el-checkbox v-model="checked2" style="color:red;">全部选</el-checkbox>
                    </div>
                    <div>
                        <el-checkbox v-model="item.type" v-for="item in czgnqx" :key="item.id" style="margin-left:10px;">{{item.name}}</el-checkbox>
                    </div>
                </div>
            </div>
        </div>
        <div class="user_11"> 
           <div class="user_12">
                <el-button type="primary" class="user_12_a">确认保存</el-button>
                <el-button type="info" class="user_12_b">取消</el-button>
           </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {reactive, ref,defineComponent} from "vue";
export default defineComponent({
   setup() {
    const labelPosition = ref('right')
    const checked2 = ref(true)
    const ruleForm = reactive({
    username: '',
    staffname: '',
    admin:'',
    depname:'',
    postname:'',
    postname2:'',
    impower:'',
    region1: '',
    })
    let lmqx :Array<{
        id:number,
        name:string,
        type:boolean
    }> = reactive([
        {id:1,name:"机构管理",type:false},
        {id:2,name:"信息管理",type:false},
        {id:3,name:"商机管理",type:false},
        {id:4,name:"日志管理",type:false},
        {id:5,name:"产品管理",type:false},
        {id:6,name:"合同管理",type:false},
        {id:7,name:"预约管理",type:false},
        {id:8,name:"售后管理",type:false},
        {id:9,name:"任务清单",type:false},
        {id:10,name:"员工管理",type:false},
        {id:11,name:"资料库管理",type:false},
        {id:12,name:"统计分析",type:false},
        {id:13,name:"系统对接管理",type:false},
        {id:14,name:"权限管理",type:false},
        {id:15,name:"系统配置",type:false},
        {id:16,name:"用户管理",type:false},
        {id:17,name:"系统日志",type:false},
    ])
    let czgnqx :Array<{
        id:number,
        name:string,
        type:boolean
    }> = reactive([
        {id:1,name:"创建",type:false},
        {id:2,name:"编辑",type:false},
        {id:3,name:"删除",type:false},
        {id:4,name:"查看",type:false},
        {id:5,name:"搜索",type:false},
        {id:6,name:"授权",type:false},
    ])
    return{
        labelPosition,ruleForm,checked2,lmqx,czgnqx
    }
   }
})
</script>

<style scoped lang="less">
.myuser {
  width: calc(100% - 40px);
  height: 100%;
}
.usertitle {
  width: calc(100% - 40px);
  height: 100px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user_1 {
  width: calc(100% - 40px);
  height: 50px;
  border-bottom: 1px solid #D7D7D7;
  display: flex;
  align-items: center;
//   background-color: pink;
  margin-left:15px
}
.user_2{
    width:calc(100% - 40px) ;
    height: 380px;
    margin-left:15px;
    margin-top: 20px;
}
.user_3 {
  width: calc(100% - 40px);
  height: 50px;
  border-bottom: 1px solid #D7D7D7;
  display: flex;
  align-items: center;
//   background-color: pink;
  margin-left:15px
}
.user_4{
    width:calc(100% - 40px) ;
    height: 260px;
    margin-left:15px;
    margin-top: 20px;
    display: flex;
}
.user_5{
    width: 620px;
    height: 210px;
    padding: 10px;
}
.user_6{
    width: 465px;
    height: 210px;
    padding: 10px;
    margin-left: 20px;
}
.user_7{
    width: 600px;
    height: 30px;
}
.user_8{
    width: 600px;
    height: 160px;
    padding: 10px;
     border: 2px dashed #D7D7D7 ;
}
.user_9{
    width: 435px;
    height: 30px; 
}
.user_10{
    width: 435px;
    height: 160px;
    padding: 10px;
     border: 2px dashed #D7D7D7 ;
}
.user_11{
    width: calc(100% - 40px);
    height: 50px;
    margin-left:15px;
    display: flex;
    justify-content: center;
}
.user_12{
    width: 400px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-content: center;
}
.user_12_a{
    width: 120px;
    height: 40px;
}
.user_12_b{
    width: 120px;
    height: 40px;
}
</style>